<template>
  {{ name }}
  <button @click="changeName">changeName</button>
  {{ hobby }}
</template>

<script setup lang='ts'>
import { ref,Ref , isRef , shallowRef , triggerRef} from 'vue'

// isRef 判断是不是ref对象


// JS
// let name= ref("gangLonely")  
// const changeName = () => {
//   name.value = "chen"
//   console.log(name);
// }

// TS  1
// 不是响应式的
// let name : string = "gangLonely" 
// const changeName = () => {
//   name = 123
//   console.log(name);
// }

// TS  2
// 响应式的  TS使用泛型
// let name = ref<string | null>("gangLonely" )
// const changeName = () => {
//   name.value = 'chen'
//   console.log(name);
// }


// TS  3
// 响应式的  TS使用Ref<> 泛型
let name : Ref <string | null> = ref("gangLonely" )
const changeName = () => {
  name.value = 'chen'
  hobby.value.name = "football"
  triggerRef(hobby)
  console.log(name);
}
// triggerRef 强制更新dom
// shallowRef 只能改变shallowRef.value的浅层 , 不是影响式的 可以节约性能
let hobby = shallowRef({
    name : "basketball"
})  


</script>

<style lang='scss' scoped>

</style>